// 翻页动画
.page {
  &-enter-active {
    transform-style: preserve-3d;
    perspective: 1200px;
    transform: perspective(800px);
    transform-origin: left;
    animation: pageIn 1s ease;
  }
  &-leave-active {
    transform-style: preserve-3d;
    perspective: 1200px;
    transform: perspective(800px);
    transform-origin: left;
    animation: pageOut 1s forwards;
  }
}

@keyframes pageIn {
  0% {
    transform: rotateY(-160deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

@keyframes pageOut {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-160deg);
  }
}

// 向上呈现
.fade-up {
  &-enter-active {
    transition: transform 0.3s;
    transform: translate3d(0, 0, 0);
  }
  &-leave-active {
    transition: transform 0.3s;
    transform: translate3d(0, -100%, 0);
  }
  &-enter {
    transform: translateY(100%);
    opacity: 1;
  }
  &-leave-to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

// 向右呈现
.fade-left {
  &-enter-active {
    transition: transform 0.3s;
    transform: translate3d(0, 0, 0);
  }
  &-leave-active {
    transition: transform 0.3s;
    transform: translate3d(-100%, 0, 0);
  }
  &-enter {
    transform: translateX(-100%);
    opacity: 0;
  }
}

// 向左呈现
.fade-right {
  &-enter-active,
  &-leave-active {
    transition: all 0.3s ease;
  }
  &-enter,
  &-leave-to {
    transform: translate3d(100%, 0, 0);
  }
}

// 弹出框呈现
.confirm {
  &-enter-active,
  &-leave-active {
    animation: zoom-in 0.3s;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes zoom-in {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

// mini播放器
.mini {
  &-enter-active,
  &-leave-active {
    transition: all 0.4s;
  }
  &-enter,
  &-leave-to {
    opacity: 0;
  }
}

// 播放列表呈现
.play-list {
  &-enter-active,
  &-leave-active {
    transition: all 0.1s;
  }
  &-enter,
  &-leave-to {
    height: 0;
  }
}

.player {
  &-enter-active,
  &-leave-active {
    transition: all 0.4s;
    .top,
    .bottom {
      transition: all 0.4s cubic-bezier(0.86, 0.18, 0.82, 1.32);
    }
  }

  &-enter,
  &-leave-to {
    opacity: 0;
    .top {
      transform: translate3d(0, -100px, 0);
    }
    .bottom {
      transform: translate3d(0, 100px, 0);
    }
  }
}
